<template>
	<view class="index-container">
		<u-navbar :is-back="false" height="95" 
		:background="background" :border-bottom='false'>
			<view class="top slot-wrap">
				<text class="title">香哈菜谱大全</text>
				<view class="">
					<text class="title-sm">小白学做菜必备烹饪助手</text>
				</view>
				<view class="search">
					<u-search placeholder="共有9999道菜" height="74" bg-color='white' input-align="center"
						:show-action="false" v-model="keyword"></u-search>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="banner">
				<banner :swiperData='swiperData' />
			</view>
			<homeNav />
			<homeFloor />
			<view class="guessUlike">
				<homeLike :likeItem='item' v-for="item in guessUlikeData" :key='item._id' />
			</view>
		</view>
		<!-- 导航栏 -->
		<tabbar />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					// background: 'url(../../static/image/index/mengbanzu250@2x.png) no-repeat'
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					backgroundImage: 'linear-gradient(45deg,  rgb(238,129,49), rgb(240,153,55))'
				},
				keyword: '',
				swiperData: [],
				guessUlikeData: [],

			}
		},
		onLoad() {
			this.getSwiper()
			this.getRecommend()
		},
		methods: {
			getSwiper() {
				this.$api.home.getSwiperData().then(data => {
					this.swiperData = data.message
					// console.log(data.message);
				})
			},
			getRecommend() {
				this.$api.home.getRecommend().then(data => {
					this.guessUlikeData = data.message
					// console.log(data.message);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-container {
		padding: 0 32rpx;

		.top {
			position: fixed;

			.title {
				padding: 32rpx;
				font-size: 40rpx;
				color: white;
				font-weight: bold;
			}

			.title-sm {
				padding: 32rpx;
				font-size: 24rpx;
				color: white;
			}

			.search {
				width: 686rpx;
				position: absolute;
				z-index: 99;
				top: 100rpx;
				// left: 50%;
				margin-left: 32rpx;
			}
		}



		.content {
			.banner {
				margin-top: 32rpx;
			}

			.guessUlike {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}
		}
	}
</style>
